<template>
  <div class="params-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="el-card__body">
      <el-card class="box-card">
        <el-alert title="注意：只允许为第三级分类设置相关参数！"
                  type="warning"
                  :closable="false"
                  show-icon>
        </el-alert>
        <div class="selectCate">
          选择商品分类：
          <el-cascader v-model="value"
                       :options="options"
                       :props="{value: 'cat_id',
        label: 'cat_name'}"
                       @change="handleChange">
            <template slot-scope="{data}">
              <span>{{ data.cat_name }}</span>
            </template>
          </el-cascader>
        </div>
        <el-tabs v-model="activeName"
                 @tab-click="handleClick">
          <el-tab-pane label="动态参数"
                       name="添加参数">
            <el-button type="primary"
                       @click="dialogFormVisible = true"
                       :disabled='isdisabled'>添加参数</el-button>
          </el-tab-pane>
          <el-tab-pane label="静态属性"
                       name="添加属性">
            <el-button type="primary"
                       @click="dialogFormVisible = true"
                       :disabled='isdisabled'>添加属性</el-button>
          </el-tab-pane>
        </el-tabs>
        <Tables :tableData='tableData'
                :labelName='labelName'></Tables>
      </el-card>
      <el-dialog :title="'添加'+labelName"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item :label="labelName"
                        :label-width="formLabelWidth">
            <el-input v-model="form.name"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary"
                     @click="changeparams">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import Tables from '@/components/Tables.vue'
import { getGoodList, getparamsList, changeParamsList } from '@/api/Param.js'
export default {
  name: 'Params',
  data () {
    return {
      sel: 'many',
      isdisabled: true,
      activeName: '添加参数',
      labelName: '动态参数',
      options: [],
      value: [],
      formLabelWidth: '120px',
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: ''
      }
    }
  },
  components: {
    Tables

  },
  async created () {
    const res = await getGoodList()
    this.options.push(...res.data.data)
  },
  methods: {
    async handleChange (val) {
      if (this.value.length === 3) {
        this.isdisabled = false
      } else {
        return
      }
      const id = this.value[2]
      const res = await getparamsList(id, this.sel)
      // console.log(res.data.data)
      this.tableData = res.data.data
      // 数组 vals
      const res1 = this.tableData.map((item) => {
        if (item.attr_vals !== '') {
          item.attr_vals = item.attr_vals.split(' ')
        } else {
          item.attr_vals = []
        }
        return item
      })
      this.tableData = res1
    },
    handleClick (tab, event) {
      this.labelName = tab.label
      if (tab.label === '静态属性') {
        this.sel = 'only'
      } else {
        this.sel = 'many'
      }
      this.handleChange()
    },
    async changeparams () {
      const id = this.value[2]
      let vals = null
      if (this.sel === 'many') {
        vals = ''
      }
      // 添加数据
      const res = await changeParamsList(id, this.sel, this.form.name, vals)
      console.log(res.data.data)
      if (res.data.data.attr_vals !== '') {
        res.data.data.attr_vals = res.data.data.attr_vals.split(' ')
      } else {
        res.data.data.attr_vals = []
      }
      this.tableData.push(res.data.data)
      this.dialogFormVisible = false
      this.form.name = ''
    }
  }
}
</script>

<style scoped lang='less'>
.params-container {
  background: #eaedf1;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden;
  /deep/.el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: unset;
    overflow: unset;
  }
  .el-card__body {
    .box-card {
      width: 100%;
      .selectCate {
        margin: 20px 0;
      }
    }
  }
}
</style>
